import React, { Component, Suspense } from 'react';
import download from '@/utils/download';
import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { Table, Card, Row, Col, Button, message, Modal } from 'antd';
import styles from './index.less';
import Revise from './revise';
import { getUserTypeList, postUserTypeDel } from '@/services/basiccapacity';
import tableDataCheck from '@/utils/isBackPrevPage';

class UserType extends Component {
  constructor(props) {
    super(props);
    this.state = {
      query: {
        current: 1,
        size: 10,
      },
      list: [],
      loading: false,
    };
  }

  componentDidMount() {
    this.getList();
  }

  getList = async () => {
    this.setState({ loading: true });
    let { query } = this.state;
    let res = await getUserTypeList(query);
    console.log(res);
    if (res) {
      this.setState({ list: res.records, total: res.total, loading: false });
    }
  };

  addUserType = () => {
    this.Revise.init(null);
  };

  editUserType = id => {
    this.Revise.init(id);
  };

  del = id => {
    const that = this;
    Modal.confirm({
      title:'是否确认删除',
      okType:'danger',
      okText:'确定',
      cancelText:'取消',
      onOk:() => {
        that.confirmDel(id)
      }
    })

  };

  onChangePage = r => {
    let { query } = this.state;
    query.current = r;
    this.setState({ query }, () => this.getList());
  };

  confirmDel = async (id) => {
    let res = await postUserTypeDel({ id });
    console.log(res);
    if (res.msg == '操作成功') {
      message.info(res.msg);
      //判断是否需要加载上一页数据 2022.4.8
      let { list,query } = this.state;
      const newCurrent = tableDataCheck(list,query.current)
      query.current = newCurrent
      this.setState({
        query
      },() => {
        this.getList();
      })
    }
  }

  render() {
    const { list, loading, total, query } = this.state;
    const columns = [
      {
        title: '用户类型',
        dataIndex: 'typeName',
      },
      {
        title: '字段值',
        dataIndex: 'typeCode',
      },
      {
        title: '操作',
        width: 300,
        align: 'center',
        render: (text, row) => {
          return (
            <>
              <Button
                type="primary"
                onClick={e => this.editUserType(row.id)}
                style={{ marginRight: 10 }}
              >
                编辑
              </Button>
              <Button type="danger" onClick={e => this.del(row.id)}>
                删除
              </Button>
            </>
          );
        },
      },
    ];

    return (
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper>
          <Card>
            <Row style={{ marginBottom: 16 }}>
              <Col span={24} style={{ textAlign: 'right' }}>
                <Button type="primary" onClick={this.addUserType}>
                  添加
                </Button>
              </Col>
            </Row>
            <Table
              columns={columns}
              dataSource={list}
              loading={loading}
              rowKey={(_, index) => index}
              pagination={{
                total,
                current: query.current,
                onChange: this.onChangePage,
              }}
            />
            <Revise onRef={ref => (this.Revise = ref)} getList={this.getList} />
          </Card>
        </PageHeaderWrapper>
      </Suspense>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(UserType);
